<template>
  <div ref="rank" class="rank">
    <scroll class="wrapper" :data="RankList" ref="scroll">
      <div class="content">
        <rank-list :rankList="RankList"></rank-list>
      </div>
    </scroll>
  </div>
</template>

<script>
import RankList from '@/components/rank/RankList'
// better-scroll 组件
import Scroll from '@/components/base/Scroll'
import { playListMixin } from '../common/js/mixin'

export default {
  mixins: [playListMixin],
  components: {
    RankList,
    Scroll
  },
  data () {
    return {
      RankList: []
    }
  },
  methods: {
    handlePlaylist (playlist) {
      const bottom = playlist.length > 0 ? '60px' : ''
      // list是个vue components，.$el取元素
      this.$refs.rank.style.bottom = bottom
      // console.log(this.$refs.wrapper)
      this.$refs.scroll.refresh()
    },
    async getRank () {
      // const res = await this.$http.get('/api/top/category', {
      //   params: { showDetail: 1 }
      // })
      // this.RankList = res.data.data
      const res = await this.$http.get('/api/top/category', { params: { showDetail: 1 } })
      /* 处理一下数据-------☆ */
      this.RankList = res.data.data.reduce((total, item) => total.concat(item.list), [])
      // console.log(this.RankList)
    }
  },
  mounted () {
    setTimeout(() => {
      this.getRank()
    })
  }
}
</script>

<style lang="stylus" scoped>
.rank {
  position:fixed;
  top:88px;
  left:0;
  right:0;
  bottom:0;
}
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
